<template>
  <f7-list class="qm-list" inline-labels no-hairlines-md>
    <f7-list-input class="qm-list-input" v-bind="$attrs" v-on="$listeners">
      <template slot="inner">
        <f7-button
          :text="count <= 0 ? '发送验证码' : `${count}…`"
          :disabled="count > 0"
          class="btn"
          @click="getCode"
        ></f7-button>
      </template>
    </f7-list-input>
  </f7-list>
</template>

<script>
export default {
  inheritAttrs: true,
  props: {
    interval: {
      type: Number,
      default: 30,
    },
  },
  data() {
    return {
      count: 0,
      timer: null,
    };
  },
  methods: {
    getCode() {
      if (!this.timer) {
        this.count = this.interval;
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= this.interval) {
            this.count--;
          } else {
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000);
        this.$emit("getCode");
      }
    },
  },
};
</script>

<style lang="less" scoped>
.btn {
  --f7-button-font-size: var(--font-size-subtitle);
  padding-left: 0;
  padding-right: 0;
  // width: calc(190px * var(--ratio));
  width: 25%;
  flex-shrink: 0;
  position: relative;
  &::after {
    content: "";
    display: block;
    width: calc(2px * var(--ratio));
    height: calc(47px * var(--ratio));
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    background: #e9ecf0;
  }
}
</style>
